<template>
  <div class="meiriqiandao">
    <div class="headertop">
      <div class="qiandao">每日签到</div>
      <div class="qiandao">
        <el-button type="text" @click="dialogVisible = true" class="tanchuan" >
          签到规则</el-button
        >

        <el-dialog title="签到规则" :visible.sync="dialogVisible" width="80%">
          <span
            >参与本次活动前，请您详细阅读活动规则及相关条款。凡参与本次活动，则视为您已阅读、理解并同意活动规则及注意事项全部内容。
            一、签到规则 1、签到入口或方式： 1.1
            登录掘金网页端签到：您可通过掘金首页进行每日签到，也可以通过点击“个人头像-签到赢好礼”进入签到详情页面，进行签到。
            1.2
            登录掘金App签到：您可以点击掘金首页右上角签到图标进行每日签到，也可以通过点击“我-签到赢好礼”进入签到详情页面，进行签到。
            2、签到奖励 2.1
            签到得矿石：同一帐号每日可签到1次，每日完成当天签到任务，可获得当日签到对应数量的矿石奖励（具体以签到页面展示为准）。
            2.2
            矿石仅可用于在掘金兑换积分或在幸运抽奖活动中使用，不可转赠或直接兑现实物礼品；
            注意：您获得的矿石有效期为自获得当月起12个自然月，掘金将定期对过期的矿石进行作废处理，即有效期限内未使用的矿石到期将自动作废。</span
          >
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="headerzhong">
      <div class="zhongzuo">
        <div class="zhongyi">
          <span class="zitia">1</span>
          连续签到天数
        </div>
        <div class="zhongyi">
          <span class="ziti">1</span>
          累计签到天数
        </div>
        <div class="zhongyi">
          <span class="ziti">166</span>
          当前矿石数
        </div>
      </div>

      <template>
        <div class="block">
          <el-carousel height="80px" :loop="true" :autoplay="true">
            <span class="demonstration"></span>
            <el-carousel-item>
              <img src="../assets/113.png" alt="" class="tupianb" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/113.png" alt="" class="tupianb" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/113.png" alt="" class="tupianb" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </template>
    </div>
    <div class="headerxia">
      <div class="headerdate">
        <el-calendar style="height: 70%">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{ date, data }">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split("-").slice(1).join("-") }}
              {{ data.isSelected ? "✔️已签到" : "未签到" }}
            </p>
          </template>
        </el-calendar>
      </div>
      <div class="kapian">
        <div class="aaa" v-if='display' @click="changesing" >点击签到</div>
        <div class="aaa" v-else @click="changesing" >今日已签到</div>

        <div class="bbb">
          <div class="ccc">
            <img src="../assets/003.png" alt="" class="imga" />
          </div>
          <div class="ddd">
            <div class="ddda">宜提桶跑路</div>
            <div class="dddb">程序设计之道无远弗届，御晨曦微风而返</div>
          </div>
          <div class="eee">
            <div class="eeezuo">
              <div class="eeezuotu">
                <img src="../assets/004.png" alt="" />
              </div>

              &nbsp;&nbsp; 扫描右侧二维码分享给好友
            </div>
            <div class="eeeyou">
              <img src="../assets/005.png" alt="" class="eeeyoutu" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="headerbuttem">
      <div class="buttemtop">
        <div class="renwu">我的任务</div>
      </div>
      <div class="buttemzhong">
        <div class="hezhi">
          <img src="../assets/006.png" alt="" class="hezhitu" />
        </div>
      </div>
      <div class="buttemdi">程序员正在快马加鞭开发中，敬请期待</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "qiandaoo",
  data() {
    return {
      dialogVisible: false,
      display:true,
    };
  },
  
  methods: {
   changesing(){
     this.display=!this.display
 }
    },
  
};
</script>

<style lang="less" scoped>
.headertop {
  display: flex;
  justify-content: space-between;
}
.qiandao {
  width: 100px;
  height: 60px;
  /*  border: 1px solid blue; */
  text-align: center;
  line-height: 60px;
}
.headerzhong {
  display: flex;
}
.zhongzuo {
  width: 600px;
  height: 80px;
  /*  border: 1px solid blue; */
  display: flex;
}
.zhongyi {
  flex: 1;
  text-align: center;
  line-height: 80px;
  font-size: 16px;
}
.ziti {
  font-size: 40px;
}
.zhongyou {
  width: 260px;
  height: 80px;
  /* border: 1px solid red; */
}
.tupianb {
  width: 260px;
  height: 80px;
}
.headerxia {
  width: 900px;
  height: 630px;
  /*  border: 1px solid red; */
  margin-top: 50px;
  display: flex;
}
.headerdate {
  width: 552px;
  height: 630px;
  /*   border: 1px solid green; */
  margin-left: 30px;
}
.is-selected {
  color: #1989fa;
}
.kapian {
  width: 300px;
  height: 630px;
  /*  border: 1px solid black; */
}
.aaa {
  width: 258px;
  height: 80px;
  /*  border: 1px solid red; */
  text-align: center;
  line-height: 80px;
  font-size: 22px;
  border-radius: 60px;
  color: blue;
  background-color: #e8f3ff;
}
.bbb {
  width: 258px;
  height: 516px;
  margin-top: 30px;
  /*  border: 1px solid red; */
}
.ccc {
  width: 256px;
  height: 200px;
  border: 1px solid pink;
}
.imga {
  width: 256px;
  height: 200px;
}
.ddd {
  width: 256px;
  height: 200px;
  /*   border: 1px solid red; */
}
.ddda {
  width: 150px;
  font-size: 28px;
  color: blue;
  margin-top: 50px;
  margin-left: 20px;
}
.dddb {
  width: 222px;
  margin-top: 30px;
  margin-left: 24px;
  font-size: 16px;
}
.eee {
  width: 256px;
  height: 112px;
  /*  border: 1px solid red; */
  display: flex;
}
.eeezuo {
  margin-top: 10px;
  width: 184px;
  height: 80px;
  /*  border: 1px solid blue; */
  font-size: 14px;
}
.eeezuotu {
  width: 150px;
  height: 50px;
  margin-top: 10px;
  margin-left: 14px;
}
.eeeyou {
  width: 60px;
  height: 60px;
  /* border: 1px solid red; */
  margin-top: 25px;
  margin-left: 5px;
}
.eeeyoutu {
  width: 60px;
  height: 60px;
}
.headerbuttem {
  width: 900px;
  height: 370px;
  /*  border: 1px solid blue; */
}
.buttemtop {
  height: 62px;
  width: 900px;
  border-bottom: 1px solid black;
}
.renwu {
  width: 100px;
  height: 60px;
  font-size: 20px;
  /* border: 1px solid red; */
  line-height: 60px;
  margin-left: 30px;
}
.buttemzhong {
  margin-top: 50px;
  height: 120px;
  width: 900px;
  display: flex;

  justify-content: center;

  align-items: center;
  /* border: 1px solid red; */
}
.hezhi {
  height: 120px;
  width: 160px;
  /*  border: 1px solid red; */
}
.hezhitu {
  width: 160px;
  height: 120px;
}
.buttemdi {
  margin-top: 10px;
  text-align: center;
}

/*   .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  } */

/*  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  } */

/*  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  } */
.el-carousel {
  width: 300px;
  height: 80px;
}
.tanchuan{
  font-size:14px;
  color:black;
}
.zitia{
  font-size:40px;
  color:blue;
}
</style>

